<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
		<style>
			
		</style>
		<script src='./src/vue.js'></script>
	</head>

	<body>
		<div id="app">
			<p id="miaov">hello</p>
		</div>
		
		<script>
			let vm = new Vue({
				//el:'#app',
				data:{
					message: 'hello'
				},
				beforeCreate(){
					console.group('---beforeCreate---');
					console.log(this.message);
					console.log(this.$el);
					console.groupEnd('---beforeCreate---');
				},
				created(){
					console.group('---created---');
					console.log('发送ajax');
					/*setTimeout( () => {
						this.message = 123;
					},1000)*/
					console.log(this.message);
					console.log(this.$el);
					console.groupEnd('---created---');
				},
				beforeMount(){
					console.group('---beforeMount---');
					console.log(this.message);
					console.log(this.$el);
					console.groupEnd('---beforeMount---');
				},
				mounted(){
					console.group('---mounted---');
					console.log(this.message);
					console.log('操作dom');
					console.log(this.$el);
					// 操作DOM
					document.querySelector('#miaov').onclick = function (){
						alert(1)	
					}
					console.groupEnd('---mounted---');
				}
			})

			vm.$mount('#app')

			//console.log(vm.$el);
		</script>
	</body>
</html>